<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-19 11:33:09
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 15:37:17
-->
<div class="print">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>打印配套标签</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="ui-g-4" style="padding-right: 20px solid #fff;">
        <div class="m-portlet m-portlet--mobile" style="height: 770px;overflow: auto;">
            <div class="query-box" style="padding: 15px;">
                <span class="p-field">
                    <span class="input-lable" style="margin-right: 10px;">*型号：</span>
                    <p-dropdown name="model" [options]="modelOptions" [(ngModel)]="model" placeholder="请选择型号"
                        emptyFilterMessage="暂无数据" (onChange)="onChange($event)">
                        <ng-template let-item pTemplate="selectedItem">
                            <span *ngIf="model != undefind "
                                style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                            <span *ngIf="model == undefind "
                                style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                    {{model.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                </span>
                <span class="p-field">
                    <span class="input-lable" style="margin-right: 10px;margin-left: 10px;">*发次：</span>
                    <p-dropdown name="senTime" [options]="senTimeOptions" [(ngModel)]="senTime" placeholder="请选择发次"
                        emptyFilterMessage="暂无数据" (onChange)="onXjChange($event)">
                        <ng-template let-item pTemplate="selectedItem">
                            <span *ngIf="senTime != undefind "
                                style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                            <span *ngIf="senTime == undefind "
                                style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                    {{model.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                </span>
                <p-button label="查询" (onClick)="getTree()" style="margin-left: 5px;"></p-button>
                <p-button label="重置" (onClick)="reset()" style="margin-left: 5px;"></p-button>
            </div>
            <div>
                <p-tree [value]="files2" selectionMode="single" [(selection)]="selectedFiles1"
                    (onNodeSelect)="nodeSelect($event)" [style]="{ height: '90%' }">
                    <ng-template let-node pTemplate="default">
                        <img class="imgcontent" src="../../../assets/common/images/三级图标.png"
                            *ngIf="node.nodeLevel==8||node.nodeLevel==9" width="20" height="20" />
                        <img class="imgcontent" src="../../../assets/common/images/0.png"
                            *ngIf="node.nodeLevel=='undefind'" width="20" height="20" />
                        <img class="imgcontent" src="../../../assets/common/images/1.png" *ngIf="node.nodeLevel==0"
                            width="20" height="20" />
                        <img class="imgcontent" src="../../../assets/common/images/2.png" *ngIf="node.nodeLevel==1"
                            width="20" height="20" />
                        <img class="imgcontent" src="../../../assets/common/images/3.png" *ngIf="node.nodeLevel==2"
                            width="20" height="20" />
                        <img class="imgcontent" src="../../../assets/common/images/4.png" *ngIf="node.nodeLevel==3"
                            width="20" height="20" />
                        <img class="imgcontent" src="../../../assets/common/images/5.png" *ngIf="node.nodeLevel==4"
                            width="20" height="20" />
                        <!-- [class]="(node.nodeLevel!=8&&node.nodeLevel!=9)?'pi pi-folder':node.nodeLevel==8?'pi pi-list':'pi pi-file'" -->
                        <span
                            *ngIf="node.key==-1">{{node.model}}-{{node.lotNo}}-{{node.nodeDrawingNo}}-{{node.nodeName}}-{{node.stageSign}}</span>
                        <span *ngIf="node.key!=-1">{{node.nodeDrawingNo}}-{{node.nodeName}}</span>
                        <span class="ptagisRelation"
                            *ngIf="node.isRelation==1&&node.isExport!=1">{{node.isRelation==1?'已关联':''}}</span>
                        <span class="ptagisExport" *ngIf="node.isExport==1">{{node.isExport==1?'已导出':''}}</span>
                    </ng-template>

                </p-tree>
            </div>
        </div>

    </div>
    <div class="ui-g-8">
        <div class="m-portlet m-portlet--mobile" style="height: 770px;">
            <div class="p-formgroup-inline" style="padding-top: 15px!important;">
                <!-- <p-button label="全选工序" (onClick)="reset()"></p-button>
                        <p-button label="全选工步" (onClick)="reset()" class="ml"></p-button> -->
                <p-button *ngIf="'Pages.PrintLabels.PrintLabel'| permission" label="打印标签" (onClick)="print()" style="margin-left: 10px;"></p-button>
            </div>
            <div class="row align-items-center" style="margin-top: 10px;padding: 15px;">
                <div class="primeng-datatable-container">
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <!-- <p-treeTable [lazy]="true" [value]="files1" [scrollable]="true" (onLazyLoad)="getTreedata()"
                            [(selection)]="selectedTreeTable" selectionMode="checkbox">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 80px;">选择</th>
                                    <th style="width: 200px">层级</th>
                                    <th style="width: 150px">产品图号</th>
                                    <th style="width: 150px">产品名称</th>
                                    <th style="width: 150px">产品层级</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                                <tr [ttRow]="rowNode" *ngIf="rowData">
                                    <td style="width: 80px;">
                                        <p-treeTableCheckbox [value]="rowNode">
                                        </p-treeTableCheckbox>
                                    </td>
                                    <td style="width: 200px">
                                        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                        {{rowData.levelName}}
                                    </td>
                                    <td style="width: 150px">{{rowData.code}}</td>
                                    <td style="width: 150px">{{rowData.name}}</td>
                                    <td style="width: 150px">{{rowData.nodeLevel == 8? '工序':'工步'}}</td>
                                </tr>
                            </ng-template>
                        </p-treeTable> -->
                        <p-table  [value]="files1"[lazy]="true" [(selection)]="selectedTreeTable"
                            [scrollable]="true" >
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 50px">
                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                    </th>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">图号</th>
                                    <th style="width: 150px">名称</th>
                                    <th style="width: 150px">层级</th>
                                    <!-- <th style="width: 150px">打印次数</th> -->
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 50px">
                                        <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                    </td>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.code}}</td>
                                    <td style="width: 150px">{{record.name}}</td>
                                    <td style="width: 150px">{{selectedFiles1.nodeLevel == 8? '工步':'工序'}}</td>
                                    <!-- <td style="width: 150px">{{record.number}}</td> -->
                                </tr>
                            </ng-template>
                        </p-table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 打印标签 -->
    <app-go-print #GoPrintComponent [printInfo]='form' (modalSave)="backTOPrint()"></app-go-print>
</div>